<!--<template>
  <el-table :data="filteredCourses" style="width: 100%">
    <el-table-column label="课程ID" prop="id" width="100" align="center" />
    <el-table-column label="课程名称" prop="name" width="200" align="center" />
    <el-table-column label="学分" prop="point" width="120" align="center" />
    <el-table-column label="学时" prop="time" width="120" align="center" />

    &lt;!&ndash; 右侧操作列 &ndash;&gt;
    <el-table-column label="操作" width="220" align="center">
      <template #header>
        <el-input
            v-model="keyword"
            size="default"
            placeholder="搜索课程"
            clearable
            style="width: 180px;"
        />
      </template>
      <template #default="scope">
        <el-button size="small" type="primary" @click="editCourse(scope.row)">
          编辑
        </el-button>
        <el-button size="small" type="danger" @click="deleteCourse(scope.row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>-->
<template>
  <el-table :data="filteredCourses" style="width: 100%" :fit="true">
    <el-table-column label="课程ID" prop="id" align="center" show-overflow-tooltip />
    <el-table-column label="课程名称" prop="name" align="center" show-overflow-tooltip />
    <el-table-column label="学分" prop="point" align="center" show-overflow-tooltip />
    <el-table-column label="学时" prop="time" align="center" show-overflow-tooltip />

    <!-- 右侧操作列 -->
    <el-table-column label="操作" align="center">
      <template #header>
        <el-input
            v-model="keyword"
            size="default"
            placeholder="搜索课程"
            clearable
            style="width: 180px;"
        />
      </template>
      <template #default="scope">
        <el-button size="small" type="primary" @click="editCourse(scope.row)">
          编辑
        </el-button>
        <el-button size="small" type="danger" @click="deleteCourse(scope.row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: "CourseView",
  data() {
    return {
      courses: [], // 课程数据
      keyword: ""   // 搜索关键字
    };
  },
  computed: {
    // 根据关键词过滤课程列表
    filteredCourses() {
      return this.courses.filter(course =>
          course.name.includes(this.keyword)
      );
    }
  },
  methods: {
    // 加载课程数据
    loadCourses() {
      this.$axios.get("/findCourses").then(result => {
        if (result.data.code === 200) {
          this.courses = result.data.data; // 将接口返回的课程数据赋值给 courses
        } else {
          this.$message.error("加载课程失败"); // 如果接口返回的代码不是 200，提示失败
        }
      }).catch(error => {
        console.error("API 请求错误", error);
        this.$message.error("请求数据失败"); // 请求失败时提示错误
      });
    },
    // 编辑课程
    editCourse(course) {
      console.log("编辑课程", course);
      // 这里可以跳转到编辑页面或者弹出编辑框
    },
    // 删除课程
    deleteCourse(id) {
      this.$confirm("确定删除该课程吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // 发送删除请求
        this.$axios.post("/removeCourse", { id }).then(result => {
          if (result.data.code === 200) {
            this.courses = this.courses.filter(course => course.id !== id);
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败，请稍后重试");
          }
        }).catch(() => {
          this.$message.error("请求失败，请检查网络");
        });
      }).catch(() => {
        this.$message.info("已取消删除");
      });
    }
  },
  mounted() {
    this.loadCourses(); // 组件加载时请求课程数据
  }
};
</script>

<style scoped>
.el-table {
  margin-top: 10px;
  border-radius: 8px;
}

.el-button {
  margin-right: 5px;
}

</style>
